<template>
  <div>
    <pageMain padding="5px " background="transparent">
      <div class="chunk">
        <el-form
          :inline="true"
          class="demo-form-inline"
          size="mini"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="角色名">
            <el-input
              v-model="pageData.where.username"
              placeholder="请输入搜索角色名"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="pageData.where.state" placeholder="用户状态">
              <el-option
                v-for="state in stateList"
                :label="state.name"
                :value="state.value"
                :key="state.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="clickWhere">查询</el-button>
            <el-button type="primary" @click="clickReset">重置</el-button>
            <el-button type="primary" @click="clickAddUser"
              >添加新角色</el-button
            >
          </el-form-item>
        </el-form>

        <el-empty v-if="!tableData.length"></el-empty>

        <el-table
          v-else
          :data="tableData"
          stripe
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="角色"
            width="200"
          ></el-table-column>
          <el-table-column prop="scope" label="角色标识"></el-table-column>
          <el-table-column prop="comment" label="备注"></el-table-column>
          <el-table-column
            prop="address"
            fixed="right"
            label="操作"
            width="140"
            align="center"
          >
            <template slot="header">
              <div
                class="overall-flex overll-align-center"
                style="align-items: center"
              >
                <p class="overall-flex-1 overall-text-center">操作</p>
                <i class="el-icon-s-tools"></i>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="user-options overall-flex">
                <el-link
                  type="warning"
                  @click="clickLookUser(scope.row, scope.$index)"
                  >查看</el-link
                >
                <el-link
                  type="primary"
                  @click="clickEditUser(scope.row, scope.$index)"
                  >编辑</el-link
                >
                <el-link
                  type="danger"
                  @click="clickRemoveUser(scope.row, scope.$index)"
                  >删除</el-link
                >
              </div>
            </template></el-table-column
          >
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageData.page"
            :total="pageData.count"
            :page-size="pageData.limit"
            @current-change="getUserList"
          >
          </el-pagination>
        </div>
      </div>
    </pageMain>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";

import API from "@/api";

export default {
  components: {
    pageMain,
  },
  methods: {
    // 点击查看用户
    clickLookUser(item, index) {
      console.log(item, index);
      this.$router.push("/user/look?userid=" + item.id);
    },
    getRoleList() {
      return API.roles.list().then((res) => {
        let { data } = res;

        console.log(data);


        this.tableData.push(...data.list);
      });
    },
    // 点击删除用户
    clickRemoveUser(item, index) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return API.roles.remove({ id: item.id });
        })
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.tableData.splice(index, 1);
        })
        .catch((err) => {
          console.log(err);
          if (typeof err != "string") {
            this.$message({
              message: err.msg,
              type: "error",
            });
          }
        });
    },
  },

  created() {
    this.getRoleList();
  },

  data() {
    return {
      searchValue: "",
      pageData: {
        page: 1,
        limit: 10,
        count: null,
        where: {
          mobile: "",
          username: "",
          nickname: "",
          gender: null,
          state: null,
          role: null,
        },
      },
      tableData: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}
.pagination {
  margin: 10px 0px;
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.user-options {
  justify-content: space-around;
}
.where-list {
  gap: 35px;
  margin-bottom: 10px;
}
</style>
